<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<jsp:include page="frame/header.jsp"></jsp:include>

<title></title>


<style type="text/css">
.validate-img{
	width:100px;
	height:30px;
}

#login-form{
	position:relative;
}

#loading{
	position:absolute;
	top:30%;
	left:40%;
}
</style>




</head>
<body class="login">

	<div class="container-fluid">
		<div class="row-fluid">

			<div class="row-fluid">
				<div class="span12 center login-header">
					<h1>家在曼城——订餐系统后台</h1>
				</div>
				<!--/span-->
			</div>
			<!--/row-->

			<div class="row-fluid">
				<div class="well span5 center login-box">
					<div class="alert alert-info">请输入账号和密码.</div>
					<form id="login-form" class="form-horizontal" action="" method="post">
						<fieldset>
							<div class="input-prepend" title="账号" data-rel="tooltip">
								<span class="add-on"><i class="icon-user"></i></span><input
									autofocus class="input-large span10" name="username"
									id="username" type="text" value="" />
							</div>
							<div class="clearfix"></div>

							<div class="input-prepend" title="密码" data-rel="tooltip">
								<span class="add-on"><i class="icon-lock"></i></span><input
									class="input-large span10" name="password" id="password"
									type="password" value="" />
							</div>
							<div class="clearfix"></div>
							
							<div class="input-prepend" title="验证码" data-rel="tooltip">
								<span class="add-on"><i class="icon-info-sign"></i></span><input
									class="input-large span10" name="validateCode" id="validateCode"
									type="password" value="" />
							</div>
							<div>
							<img class='validate-img' onclick="refreshCode()"/>
							</div>
							<div class="clearfix"></div>

							<p class="center span5">
								<button type="submit" class="btn btn-primary">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
							</p>
							<div id="loading">
								<img src="<c:url value="/resources/img/loading.gif" />">
							</div>
							
						</fieldset>
					</form>
				</div>
				<!--/span-->
			</div>
			<!--/row-->
		</div>
		<!--/fluid-row-->

	</div>
	<!--/.fluid-container-->

	<jsp:include page="frame/scripts.jsp"></jsp:include>
	<script>
  $(document).ready(function() {
	var tips = '请输入账号和密码.';
	
	refreshCode();
	
	$("#loading").hide();
	
	$('#username,#password').on("keyup",function(){
		if($(this).val() != '')
			$('.alert-info').html(tips);
	})
	
	$("#login-form").submit(function() {
		//valid form
		if($('#username').val() == ""){
			$('.alert-info').html('请输入账号！');
			$('#username').focus();
			return false;
		}
		
		if($('#password').val() == ""){
			$('.alert-info').html('请输入密码！');
			$('#password').focus();
			return false;
		}
		$("#loading").show();
		//ajax submit
		$.ajax({
			url:'<c:url value="/seller/login"></c:url>',
			type:'post',
			data:$(this).serialize(),
			complete:function(){
				$("#loading").hide();
			},
			success:function(data){
				console.log(data);
				if(typeof(data.code) == 'undefined'){
					//登录成功
					var url = '${url}';
					if(url != null && "" != url){
						window.location.href = '<c:url value="${url}"></c:url>';
					}else{
						window.location.href = '<c:url value="/seller/main"></c:url>';
					}
				}else{
					console.log(data);
					$('.alert-info').html(data.msg);
					if(data.code == '2102'){
						$("#username").focus();
					}else if(data.code == '2103'){
						$("#password").focus();
					}else if(data.code == '2001'){
						$("#validateCode").focus();
					}
						
				}
				
				
			}
		});
		
		return false;
	})
})

 		/**
		* 刷新验证码
		*/
		function refreshCode(){
			//加入随机数作为参数，主要是解决有些浏览器不刷新的问题
			$(".validate-img").attr('src','<c:url value="/api/validatecode?q='+Math.random()+'"/>');
			
		}
  </script>
</body>
</html>
